      var myChart121 = echarts.init(document.getElementById('main121'));

        // 指定图表的配置项和数据
       
var option121 = {

    
		title: {
        text: '用户提速时长分布',
        
				left: 'center',
        
				top: 27,
        
				textStyle:{
    	fontSize: 24,
    	fontFamily:'Microsoft Yahei',
	    fontWeight: 'normal',
	    color: '#fff'
	    }
    
			},

    
		tooltip : {	trigger: 'item',

     				formatter: "{a} <br/>{b} : {c} ({d}%)"
    
			},

    
		visualMap: {
        
			show: false,
        
			min: -13414944,
        
			max: 22414944,
        
			inRange: {
            
				colorLightness: [0, 1]
        
				}
    
			},
    
		series : [
     
				{
            	name:'访问来源',
            
						type:'pie',
            
						radius : '65%',
            
						center: ['50%', '60%'],
           
						data:[
                
							{value:5414944, name:'30m以内'},
   
             						{value:2754983, name:'30m-1h'},
					
                {value:2000636, name:'1h-2h'},

					                {value:1469534, name:'2h-5h'},
					
                {value:1768237, name:'5h以上'}

					            ].sort(function (a, b) { return a.value - b.value; }),
						roseType: 'radius',
            
						label: {
               
								 normal: {
                    
										textStyle: {
                        
													color: 'rgba(255, 255, 255, 1)'
                    										}
                
									}
            
							},
            
						labelLine: {
               
								 normal: {
                   
										 lineStyle: {
                        
													color: 'rgba(255, 255, 255, 0.8)'
                   											 },
                    
								smooth: 0.2,
                    
								length: 10,
                    
								length2: 10
                
							}
            
				},
            
		itemStyle: {
                
				normal: {
                    						color: '#0FA8DB',
                    
						shadowBlur: 200,
                    
						shadowColor: 'rgba(0, 0, 0, 0.5)'
                
					}
            
			},

            
		animationType: 'scale',
            
		animationEasing: 'elasticOut',
            
		animationDelay: function (idx) {
                return Math.random() * 200;
            }
        
	}
    
]
};
        myChart121.setOption(option121);
    
// ************************************************
        // 基于准备好的dom，初始化echarts实例
        var myChart1211 = echarts.init(document.getElementById('main1211'));

        // 指定图表的配置项和数据
       
var option1211 = {

    
		title: {
        text: '用户提速时长分布',
        
				left: 'center',
        
				top: 27,
        
				textStyle:{
    	fontSize: 24,
    	fontFamily:'Microsoft Yahei',
	    fontWeight: 'normal',
	    color: '#fff'
	    }
    
			},

    
		tooltip : {	trigger: 'item',

     				formatter: "{a} <br/>{b} : {c} ({d}%)"
    
			},

    
		visualMap: {
        
			show: false,
        
			min: -13414944,
        
			max: 22414944,
        
			inRange: {
            
				colorLightness: [0, 1]
        
				}
    
			},
    
		series : [
     
				{
            	name:'访问来源',
            
						type:'pie',
            
						radius : '65%',
            
						center: ['50%', '60%'],
           
						data:[
                
							{value:5414944, name:'30m以内'},
   
             						{value:2754983, name:'30m-1h'},
					
                {value:2000636, name:'1h-2h'},

					                {value:1469534, name:'2h-5h'},
					
                {value:1768237, name:'5h以上'}

					            ].sort(function (a, b) { return a.value - b.value; }),
						roseType: 'radius',
            
						label: {
               
								 normal: {
                    
										textStyle: {
                        
													color: 'rgba(255, 255, 255, 1)'
                    										}
                
									}
            
							},
            
						labelLine: {
               
								 normal: {
                   
										 lineStyle: {
                        
													color: 'rgba(255, 255, 255, 0.8)'
                   											 },
                    
								smooth: 0.2,
                    
								length: 10,
                    
								length2: 10
                
							}
            
				},
            
		itemStyle: {
                
				normal: {
                    						color: '#0FA8DB',
                    
						shadowBlur: 200,
                    
						shadowColor: 'rgba(0, 0, 0, 0.5)'
                
					}
            
			},

            
		animationType: 'scale',
            
		animationEasing: 'elasticOut',
            
		animationDelay: function (idx) {
                return Math.random() * 200;
            }
        
	}
    
]
};
        myChart1211.setOption(option1211);
// *********************************
        
        
        // 基于准备好的dom，初始化echarts实例
        var myChart122 = echarts.init(document.getElementById('main122'));

        // 指定图表的配置项和数据
       
var option122 = {

    
		title: {
        text: '用户提速次数分布',
        
				left: 'center',
        
				top: 27,
        
				textStyle:{
			    	fontSize: 24,
			    	fontFamily:'Microsoft Yahei',
				    fontWeight: 'normal',
				    color: '#fff'
				    }
    
			},

    
		tooltip : {	trigger: 'item',

     				formatter: "{a} <br/>{b} : {c} ({d}%)"
    
			},

    
		visualMap: {
        
			show: false,
        
			min: -13414944,
        
			max: 22414944,
        
			inRange: {
            
				colorLightness: [0, 1]
        
				}
    
			},
    
		series : [
     
				{
            	name:'访问来源',
            
						type:'pie',
            
						radius : '60%',
            
						center: ['50%', '60%'],
           
						data:[
                
							{value:6353372, name:'1次'},
							{value:2568737, name:'2次'},
							{value:1389993, name:'3次'},
							{value:1842432, name:'4-6次'},
							{value:762657, name:'7-10次'},
							{value:407730, name:'11-20次'},
							{value:83413, name:'20次以上'}

					            ].sort(function (a, b) { return a.value - b.value; }),
						roseType: 'radius',
            
						label: {
               
								 normal: {
                    
										textStyle: {
                        
													color: 'rgba(255, 255, 255, 1)'
                    										}
                
									}
            
							},
            
						labelLine: {
               
								 normal: {
                   
										 lineStyle: {
                        
													color: 'rgba(255, 255, 255, 0.8)'
                   											 },
                    
								smooth: 0.2,
                    
								length: 10,
                    
								length2: 10
                
							}
            
				},
            
		itemStyle: {
                
				normal: {
                    						color: '#0FA8DB',
                    
						shadowBlur: 200,
                    
						shadowColor: 'rgba(0, 0, 0, 0.5)'
                
					}
            
			},

            
		animationType: 'scale',
            
		animationEasing: 'elasticOut',
            
		animationDelay: function (idx) {
                return Math.random() * 200;
            }
        
	}
    
]
};
        myChart122.setOption(option122);
        


// ***************************************************
var myChart22 = echarts.init(document.getElementById('main22'));
var geoCoordMap = {
	    '网易': [121.4648,31.2891],
	    '东莞': [113.8953,22.901],
	    '东营': [118.7073,37.5513],
	    '中山': [113.4229,22.478],
	    '临汾': [111.4783,36.1615],
	    '临沂': [118.3118,35.2936],
	    '丹东': [124.541,40.4242],
	    '丽水': [119.5642,28.1854],
	    '乌鲁木齐': [87.9236,43.5883],
	    '腾讯': [108.8955,21.0097],
	    '保定': [115.0488,39.0948],
	    '兰州': [103.5901,36.3043],
	    '包头': [110.3467,41.4899],
	    '完美世界': [116.4551,40.2539],
	    '北海': [109.314,21.6211],
	    '江苏': [120.8062,32.9208],
	    '南宁': [108.479,23.1152],
	    '江西': [116.0046,28.1633],
	    '南通': [121.1023,32.1625],
	    '4GQoS平台': [117.4689,24.1478],
	    '台州': [121.1353,28.6688],
	    '合肥': [117.29,32.0581],
	    '呼和浩特': [111.4124,40.4901],
	    '咸阳': [108.4131,34.8706],
	    '哈尔滨': [127.9688,45.368],
	    '唐山': [118.4766,39.6826],
	    '嘉兴': [120.9155,30.6354],
	    '大同': [113.7854,39.8035],
	    '大连': [122.2229,39.4409],
	    '天津': [117.4219,39.4189],
	    '太原': [112.3352,37.9413],
	    '威海': [121.9482,37.1393],
	    '宁波': [121.5967,29.6466],
	    '宝鸡': [107.1826,34.3433],
	    '宿迁': [118.5535,33.7775],
	    '常州': [119.4543,31.5582],
	    '广东': [114.8107,22.2196],
	    '廊坊': [116.521,39.0509],
	    '延安': [109.1052,36.4252],
	    '张家口': [115.1477,40.8527],
	    '徐州': [117.5208,34.3268],
	    '德州': [116.6858,37.2107],
	    '惠州': [114.6204,23.1647],
	    '成都': [103.9526,30.7617],
	    '扬州': [119.4653,32.8162],
	    '承德': [117.5757,41.4075],
	    '拉萨': [91.1865,30.1465],
	    '无锡': [120.3442,31.5527],
	    '日照': [119.2786,35.5023],
	    '昆明': [102.9199,25.4663],
	    '浙江': [121.5313,29.3773],
	    '枣庄': [117.323,34.8926],
	    '柳州': [109.3799,24.9774],
	    '株洲': [113.5327,27.0319],
	    '湖北': [111.3896,31.6628],
	    '汕头': [117.1692,23.3405],
	    '江门': [112.6318,22.1484],
	    '沈阳': [123.1238,42.1216],
	    '沧州': [116.8286,38.2104],
	    '河源': [114.917,23.9722],
	    '泉州': [118.3228,25.1147],
	    '泰安': [117.0264,36.0516],
	    '泰州': [120.0586,32.5525],
	    '济南': [117.1582,36.8701],
	    '济宁': [116.8286,35.3375],
	    '海口': [110.3893,19.8516],
	    '淄博': [118.0371,36.6064],
	    '迅游': [118.927,33.4039],
	    '深圳': [114.5435,22.5439],
	    '清远': [112.9175,24.3292],
	    '温州': [120.498,27.8119],
	    '渭南': [109.7864,35.0299],
	    '湖州': [119.8608,30.7782],
	    '湘潭': [112.5439,27.7075],
	    '滨州': [117.8174,37.4963],
	    '潍坊': [119.0918,36.524],
	    '烟台': [120.7397,37.5128],
	    '玉溪': [101.9312,23.8898],
	    '珠海': [113.7305,22.1155],
	    '盐城': [120.2234,33.5577],
	    '盘锦': [121.9482,41.0449],
	    '石家庄': [114.4995,38.1006],
	    '福建': [119.9543,25.9222],
	    '秦皇岛': [119.2126,40.0232],
	    '绍兴': [120.564,29.7565],
	    '聊城': [115.9167,36.4032],
	    '肇庆': [112.1265,23.5822],
	    '舟山': [122.2559,30.2234],
	    '苏州': [120.6519,31.3989],
	    '莱芜': [117.6526,36.2714],
	    '菏泽': [115.6201,35.2057],
	    '营口': [122.4316,40.4297],
	    '葫芦岛': [120.1575,40.578],
	    '衡水': [115.8838,37.7161],
	    '衢州': [118.6853,28.8666],
	    '西宁': [101.4038,36.8207],
	    '西安': [109.1162,34.2004],
	    '贵阳': [106.6992,26.7682],
	    '连云港': [119.1248,34.552],
	    '邢台': [114.8071,37.2821],
	    '邯郸': [114.4775,36.535],
	    '郑州': [113.4668,34.6234],
	    '鄂尔多斯': [108.9734,39.2487],
	    '重庆': [107.7539,30.1904],
	    '金华': [120.0037,29.1028],
	    '铜川': [109.0393,35.1947],
	    '银川': [106.3586,38.1775],
	    '镇江': [119.4763,31.9702],
	    '长春': [125.8154,44.2584],
	    '斗鱼': [111.0823,27.4568],
	    '长治': [112.8625,36.4746],
	    '阳泉': [113.4778,38.0951],
	    '青岛': [120.4651,36.3373],
	    '韶关': [113.7964,24.7028]
	};

	var BJData = [
	     	     [{name:'腾讯'}, {name:'4GQoS平台',value:95}],
	     	     [{name:'网易'}, {name:'4GQoS平台',value:95}],
	     	     [{name:'完美世界'}, {name:'4GQoS平台',value:95}],
	     	     [{name:'迅游'}, {name:'4GQoS平台',value:95}],
	     	     [{name:'斗鱼'}, {name:'4GQoS平台',value:95}],
	    [{name:'4GQoS平台'}, {name:'广东',value:95}],
	    [{name:'4GQoS平台'}, {name:'福建',value:90}],
	    [{name:'4GQoS平台'}, {name:'浙江',value:80}],
	    [{name:'4GQoS平台'}, {name:'湖北',value:70}],
	    [{name:'4GQoS平台'}, {name:'江西',value:60}]
	];
	var ProvData = [
		     	    
		     [{}, {name:'广东',value:95}],
		     [{}, {name:'福建',value:50}],
		     [{}, {name:'浙江',value:50}],
		     [{}, {name:'湖北',value:40}],
		     [{}, {name:'江西',value:40}]
		];
	var SPData= [
		     	    
			     [{}, {name:'腾讯',value:95}],
			     [{}, {name:'网易',value:70}],
			     [{}, {name:'完美世界',value:30}],
			     [{}, {name:'迅游',value:50}],
			     [{}, {name:'斗鱼',value:20}]
			];
	var PLTData= [
		     	    
			     [{}, {name:'4GQoS平台',value:95}]
			];

	

	var convertData = function (data) {
	    var res = [];
	    for (var i = 0; i < data.length; i++) {
	        var dataItem = data[i];
	        var fromCoord = geoCoordMap[dataItem[0].name];
	        var toCoord = geoCoordMap[dataItem[1].name];
	        if (fromCoord && toCoord) {
	            res.push({
	                fromName: dataItem[0].name,
	                toName: dataItem[1].name,
	                coords: [fromCoord, toCoord]
	            });
	        }
	    }
	    return res;
	};

	var color = ['#a6c84c', '#46bee9', '#ffa022'];
	var series = [];
	
	[['完美世界', BJData]].forEach(function (item, i) {
	    series.push({
	        name: '北研院4GQoS平台L',
	        type: 'lines',
	        zlevel: 1,
	        effect: {
	            show: true,
	            period: 2,
	            trailLength: 0.7,
	            color: '#fff',
	            symbolSize: 3
	        },
	        lineStyle: {
	            normal: {
	                color: color[i],
	                width: 0,
	                curveness: 0.2
	            }
	        },
	        data: convertData(item[1])
	    });
	});
	[['完美世界', ProvData]].forEach(function (item, i) {
	    series.push(
	    
	    {
	        name: '北研院4GQoS平台Prov',
	        type: 'effectScatter',
	        coordinateSystem: 'geo',
	        zlevel: 2,
	        rippleEffect: {
	            brushType: 'stroke'
	        },
	        label: {
	            normal: {
	                show: true,
	                position: 'right',
	                formatter: '{b}'
	            }
	        },
	        symbolSize: function (val) {
	            return val[2] / 4;
	        },
	        itemStyle: {
	            normal: {
	                color:'#3EF0FC'
	            }
	        },
	        data: item[1].map(function (dataItem) {
	            return {
	                name: dataItem[1].name,
	                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
	            };
	        }
	        )
	    });
	});
	[['完美世界', SPData]].forEach(function (item, i) {
	    series.push(
	    
	    {
	        name: '北研院4GQoS平台SP',
	        type: 'scatter',
	        coordinateSystem: 'geo',
	        zlevel: 1.5,
	        rippleEffect: {
	            brushType: 'stroke'
	        },
	        label: {
	            normal: {
	                show: true,
	                position: 'right',
	                formatter: '{b}'
	            }
	        },
	        symbolSize: function (val) {
	            return val[2] / 4;
	        },
	        itemStyle: {
	            normal: {
	                color:  '#f7f907'
	            }
	        },
	        data: item[1].map(function (dataItem) {
	            return {
	                name: dataItem[1].name,
	                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
	            };
	        }
	        )
	    });
	});
	[['完美世界', PLTData]].forEach(function (item, i) {
	    series.push(
	    
	    {
	        name: '北研院4GQoS平台',
	        type: 'scatter',
	        coordinateSystem: 'geo',
	        zlevel: 1.5,
	        rippleEffect: {
	            brushType: 'stroke'
	        },
	        label: {
	            normal: {
	                show: true,
	                position: 'right',
	                formatter: '{b}'
	            }
	        },
	        symbolSize: function (val) {
	            return val[2] / 4;
	        },
	        itemStyle: {
	            normal: {
	                color:  '#F86D07'
	            }
	        },
	        data: item[1].map(function (dataItem) {
	            return {
	                name: dataItem[1].name,
	                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
	            };
	        }
	        )
	    });
	});
	option22 = {
	    title : {
// text: '4GQoS调用分布',
	        subtext: '',
	        left: 'center',
	        textStyle : {
	            color: '#fff'
	        }
	    },
	    tooltip : {
	        trigger: 'item'
	    },
	    legend: {
	        orient: 'vertical',
	        top: 'bottom',
	        left: 'right',
	        data:['北研院4GQoS平台', '网易 Top10', '广东 Top10'],
	        textStyle: {
	            color: '#fff'
	        },
	        selectedMode: 'single'
	    },
	    geo: {
	        map: 'china',
	        label: {
	            emphasis: {
	                show: false
	            }
	        },
	        zoom: 1,
	        roam: true,
	        itemStyle: {
	            normal: {
	                areaColor: '#012640',
	                borderColor: '#4BECF7'
	            },
	            emphasis: {
	                areaColor: '#2a333d'
	            }
	        }
	    },
	    series: series
	};
    myChart22.setOption(option22);
    
// ******************************************
  // 基于准备好的dom，初始化echarts实例
        var myChart111 = echarts.init(document.getElementById('main111'));

        // 指定图表的配置项和数据
       
var option111 =  { 
	title : {
    text: '提速成功率\n96.4%',
    x:'center',
    y:'center',
    textStyle:{
    	fontSize: 16,
    	fontFamily:'Microsoft Yahei',
	    fontWeight: 'normal',
	    color: '#fff'
	    }
},
	    tooltip: {
	        trigger: 'item',
	        formatter: "{a} <br/>{b}: {c} ({d}%)"
	    },
	    series: [
	        {
	            name:'访问来源',
	            type:'pie',
	            radius: ['50%', '65%'],
	            avoidLabelOverlap: false,
	            label: {
	                normal: {
	                    show: false,
	                    position: 'center'
	                },
	                emphasis: {
	                    show: true,
	                    textStyle: {
	                        fontSize: '10',
	                        fontWeight: 'bold'
	                    }
	                }
	            },
	            labelLine: {
	                normal: {
	                    show: false
	                }
	            },
	            data:[
	                {value:96.4, name:''},
	                {value:3.6, name:''}
	            ],
	            color:['#00F4FE', '#9875C2']  
	        }
	    ]
	};

        myChart111.setOption(option111);
// *********************************************
        // 基于准备好的dom，初始化echarts实例
        var myChart112 = echarts.init(document.getElementById('main112'));

        // 指定图表的配置项和数据
       
var option112 =  { title : {
    text: '请求成功率\n99.3%',
    x:'center',
    y:'center',
    textStyle:{
    	fontSize: 16,
	    fontWeight: 'normal',
	    color: '#fff'
	    }
},
	    tooltip: {
	        trigger: 'item',
	        formatter: "{a} <br/>{b}: {c} ({d}%)"
	    },
	    series: [
	        {
	            name:'访问来源',
	            type:'pie',
	            radius: ['50%', '65%'],
	            avoidLabelOverlap: false,
	            label: {
	                normal: {
	                    show: false,
	                    position: 'center'
	                },
	                emphasis: {
	                    show: true,
	                    textStyle: {
	                        fontSize: '30',
	                        fontWeight: 'bold'
	                    }
	                }
	            },
	            labelLine: {
	                normal: {
	                    show: false
	                }
	            },
	            data:[
	                {value:99.3, name:''},
	                {value:0.7, name:''}
	            ],
	            color:['#00F4FE', '#9875C2']  
	        }
	    ]
	};

        myChart112.setOption(option112);
        
// **************************************
// 基于准备好的dom，初始化echarts实例
        var myChart331 = echarts.init(document.getElementById('main331'));

        // 指定图表的配置项和数据
       
var option331 = {
	    title : {
	        text: '提速后用户体验',
	        x:'center',
	        textStyle:{
	        	fontFamily:'Microsoft Yahei',
	        	fontSize: 18,
			    fontWeight: '100',
			    color: '#fff'
			    },
		        subtextStyle:{
		        	fontFamily:'Microsoft Yahei',
		        	fontSize: 14,
				    fontWeight: '100',
				    color: '#fff'
				    }
	    },
	    tooltip : {
	        trigger: 'item',
	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	    },
	    series : [
	        {
	            name: '访问来源',
	            type: 'pie',
	            radius : '55%',
	            center: ['50%', '60%'],
	            data:[
	                {value:69.4, name:'未卡顿'},
	                {value:25, name:'轻微卡顿'},
	                {value:10, name:'一般卡顿'},
	                {value:2, name:'较严重卡顿'},
	                {value:2, name:'严重卡顿'}
	            ],
	            label : {
	            	normal : {
	            	textStyle : {
	            	fontWeight : 'bold',
	            	fontFamliy:'Microsoft Yahei',
	            	fontSize : 12
	            	}
	            	}
	            	},
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 1)',
		    		        textStyle:{
		    		        	fontFamily:'Microsoft Yahei',
		    		        	fontSize: '24',
		    				    fontWeight: 'normal',
		    				    color: '#fff'
		    				    }
	                },
	        		normal:{

	    		        textStyle:{
	    		        	fontFamily:'Microsoft Yahei',
	    		        	fontSize: '24',
	    				    fontWeight: 'normal',
	    				    color: '#fff'
	    				    }
	        		}
	            },  
	            color:['#0C6175', '#3B645F','#6A6649','#996933','#F86D07']  
	        }
	    ]
	};

        myChart331.setOption(option331);
        
// ********************************************
        // 基于准备好的dom，初始化echarts实例
        var myChart332 = echarts.init(document.getElementById('main332'));

        // 指定图表的配置项和数据
       
var option332 = {
	    title : {
	        text: '提速前用户体验',
	        x:'center',
	        textStyle:{
	        	fontFamily:'Microsoft Yahei',
	        	fontSize: 18,
				    fontWeight: '100',
			    color: '#fff'
			    },
		        subtextStyle:{
		        	fontFamily:'Microsoft Yahei',
		        	fontSize: 14,
				    fontWeight: '100',
				    color: '#fff'
				    }
	    },
	    tooltip : {
	        trigger: 'item',
	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	    },
	    series : [
	        {
	            name: '访问来源',
	            type: 'pie',
	            radius : '55%',
	            center: ['50%', '60%'],
	            data:[
	                {value:55.2, name:'未卡顿'},
	                {value:29, name:'轻微卡顿'},
	                {value:12, name:'一般卡顿'},
	                {value:9, name:'较严重卡顿'},
	                {value:8, name:'严重'}
	            ], label : {
	            	normal : {
		            	textStyle : {
		            	fontWeight : 'bold',
		            	fontFamliy:'Microsoft Yahei',
		            	fontSize : 12
		            	}
		            	}
		            	},
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 2,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            },  
	            color:['#0C6175', '#3B645F','#6A6649','#996933','#F86D07']  
	        }
	    ]
	};

        myChart332.setOption(option332);
        

// *********************************************
// 基于准备好的dom，初始化echarts实例
        var myChart321 = echarts.init(document.getElementById('main321'));

        // 指定图表的配置项和数据
       
var option321 =  {
	    title: {
	        text: '当月提速数 300',
	        subtext: '当月用户数 300',
	            x:'center',

	    y:'20%', 
	    textStyle:{
	        // 文字颜色
	        color:'#fff',
	        // 字体风格,'normal','italic','oblique'
	        fontStyle:'normal',
	        // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
	        fontWeight:'normal',
	        // 字体系列
	        fontFamily:'Microsoft YaHei',
	        // 字体大小
	　　　　 fontSize:22
	    }, 
	    subtextStyle:{
	        // 文字颜色
	        color:'#BBB',
	        // 字体风格,'normal','italic','oblique'
	        fontStyle:'normal',
	        // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
	        fontWeight:'normal',
	        // 字体系列
	        fontFamily:'Microsoft YaHei',
	        // 字体大小
	　　　　 fontSize:16
	    }
	        
	    },
	    tooltip : {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'cross',
	            label: {
	                backgroundColor: '#6a7985'
	            }
	        }
	    },
	    grid: {
	        left: '6%',
	        right: '8%',
	        bottom: '6%',
	        containLabel: true
	    },
	    legend: {
	        data:['调用数','用户数'],
	    	y:'bottom',textStyle: {
                color: '#fff',// 坐标值得具体的颜色

            },
	    },
	    xAxis : [
	        {
	            type : 'category',
	            boundaryGap : false,
	            data : ['四月','五月','六月','七月'],

                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff',// 左边线的颜色
                        width:'0'// 坐标线的宽度
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',// 坐标值得具体的颜色
 
                    }
                }
	        		
	        }
	    ],
	    yAxis : [
	        {	name:'',
	            type : 'value',
	                    min: 0,
	                    max: 150000000,

	                 // 控制网格线是否显示
	                 splitLine: {
	                 show: false
	                 },
	                 axisLabel : { 
		            	formatter: function(value) 
		            	{ 
		            	return value/1000000+'M'; 
		            	} 
		            	},
			            axisLine: {
		                    lineStyle: {
		                        type: 'solid',
		                        color: '#fff',// 左边线的颜色
		                        width:'0'// 坐标线的宽度
		                    }
		                },textStyle: {
	                        color: '#fff',// 坐标值得具体的颜色
	               		 
	                    }
	        }
	    ],
	    	
	    series : [
	        {
	            name:'调用数',
	            type:'line',
	            smooth:true, 
	            areaStyle: {normal: {}},
	            data:[120, 132, 101, 134]
	        },
	        {
	            name:'用户数',
	            type:'line',
	            smooth:true, 
	            areaStyle: {normal: {}},
	            data:[60, 72, 51, 74]
	        }
	    ],
	    color:['#82DAF7','#026485']  
	};


        myChart321.setOption(option321);
//*****************************************

// 基于准备好的dom，初始化echarts实例
        var myChart13 = echarts.init(document.getElementById('main13'));

        // 指定图表的配置项和数据
       
var option13 =   {
	    title: {
	        text: '平台分时调用',
	        x:'center', 
		    textStyle:{
		        // 文字颜色
		        color:'#fff',
		        // 字体风格,'normal','italic','oblique'
		        fontStyle:'normal',
		        // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
		        fontWeight:'normal',
		        // 字体系列
		        fontFamily:'Microsoft YaHei',
		        // 字体大小
		　　　　 fontSize:27
		    }
	        
	    },
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'cross'
	        }
	    },
	    dataZoom: {
	        show: false,
	        start: 0,
	        end: 100
	    },
	    xAxis: [
	        {
	            type: 'category',
	            boundaryGap: [0.2, 0.2],
	            axisLabel:{
	                 //X轴刻度配置
	                 interval:2 //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
	                 
	            },axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff',// 左边线的颜色
                        width:'0'// 坐标线的宽度
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',// 坐标值得具体的颜色
 
                    }
                },
	            data: [
'6:00',
'12:00',
'18:00',
'0811',
'6:00',
'12:00',
'18:00',
'0812',
'6:00',
'12:00',
'18:00',
'0813',
'6:00',
'12:00',
'18:00',
'0814',
'6:00',
'12:00',
'18:00',
'0815',
'6:00',
'12:00',
'18:00',
'0816',
'6:00',
'12:00',
'18:00',
'0817'
]
	        }
	    ],
	    yAxis: [
		        {name:'调用数',
		            type: 'value',
		            scale: true,
		            name: '',
		            max: 2000,
		            min: 0,
		            boundaryGap: [0.2, 0.2],
		            axisLine: {
	                    lineStyle: {
	                        type: 'solid',
	                        color: '#fff',// 左边线的颜色
	                        width:'0'// 坐标线的宽度
	                    }
	                },
	                axisLabel: {
	                    textStyle: {
	                        color: '#fff',// 坐标值得具体的颜色
	 
	                    }
	                }
		        }
	    ],
	    series: [
	        {
	            name:'调用数',
	            type:'line',
	            xAxisIndex: 0,
	            yAxisIndex: 0,
	            smooth:true, 
	            data:[400,
	                  1500,
	                  1300,
	                  800,
	                  600,
	                  1700,
	                  1600,
	                  1000,
	                  500,
	                  1800,
	                  1700,
	                  1250,
	                  450,
	                  1900,
	                  1150,
	                  1100,
	                  480,
	                  1750,
	                  1500,
	                  1000,
	                  480,
	                  1750,
	                  1400,
	                  750,
	                  380,
	                  1750,
	                  900,
	                  1400]
	        }
	    ],
	    color:['#00F4FE','#fff']
	};



        myChart13.setOption(option13);




//*************************************
// 基于准备好的dom，初始化echarts实例
        var myChart322 = echarts.init(document.getElementById('main322'));

        // 指定图表的配置项和数据
       
var option322 =   {
	    title: {
	        text: '平台调用情况',
	        x:'center', 
	        y:'10px',
		    textStyle:{
		        // 文字颜色
		        color:'#fff',
		        // 字体风格,'normal','italic','oblique'
		        fontStyle:'normal',
		        // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
		        fontWeight:'normal',
		        // 字体系列
		        fontFamily:'Microsoft YaHei',
		        // 字体大小
		　　　　 fontSize:27
		    }
	        
	    },
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'cross'
	        }
	    },
	    legend: {
	        data:['调用数','用户数'],
	    	y:'bottom',textStyle: {
                color: '#fff',// 坐标值得具体的颜色

            },
	    },
	    dataZoom: {
	        show: false,
	        start: 0,
	        end: 100
	    },
	    xAxis: [
	        {
	            type: 'category',
	            boundaryGap: true, 
	            data: [
	"08-07",
	"08-08",
	"08-09",
	"08-10",
	"08-11",
	"08-12",
	"08-13",
	"08-14",
	"08-15",
	"08-16"],
    axisLine: {
        lineStyle: {
            type: 'solid',
            color: '#fff',// 左边线的颜色
            width:'0'// 坐标线的宽度
        }
    },
    axisLabel: {
        textStyle: {
            color: '#fff',// 坐标值得具体的颜色

        }
    }
	        },
	        {
	            type: 'category',
	            boundaryGap: true,
	            show : false,
	            data: [
	               	"08-07",
	            	"08-08",
	            	"08-09",
	            	"08-10",
	            	"08-11",
	            	"08-12",
	            	"08-13",
	            	"08-14",
	            	"08-15",
	            	"08-16"],
		            axisLine: {
	                    lineStyle: {
	                        type: 'solid',
	                        color: '#fff',// 左边线的颜色
	                        width:'0'// 坐标线的宽度
	                    }
	                },
	                axisLabel: {
	                    textStyle: {
	                        color: '#fff',// 坐标值得具体的颜色
	 
	                    }
	                }
	        }
	    ],
	    yAxis: [
		        {name:'调用数',
		            type: 'value',
		            scale: true,
		            name: '',
		            max: 4000000,
		            min: 0,
		            boundaryGap: [0.2, 0.2],
		            axisLabel : { 
		            	formatter: function(value) 
		            	{ 
		            	return value/1000000+'M'; 
		            	} 
		            	},
			            axisLine: {
		                    lineStyle: {
		                        type: 'solid',
		                        color: '#fff',// 左边线的颜色
		                        width:'0'// 坐标线的宽度
		                    }
		                },textStyle: {
	                        color: '#fff',// 坐标值得具体的颜色
	               		 
	                    }
		        },
	        {
	            type: 'value',
	            scale: true,
	            name:'用户数',
	            max: 800000,
	            min: 0,
	            boundaryGap: [0.2, 0.2],
	            axisLabel : { 
	            	formatter: function(value) 
	            	{ 
	            	return value/1000+'k'; 
	            	} 
	            	},
		            axisLine: {
	                    lineStyle: {
	                        type: 'solid',
	                        color: '#fff',// 左边线的颜色
	                        width:'0'// 坐标线的宽度
	                    },textStyle: {
	                        color: '#fff',// 坐标值得具体的颜色
	               		 
	                    }
	                }
	        }
	    ],
	    series: [
	        {
	            name:'调用数',
	            type:'bar',
	            xAxisIndex: 0,
	            yAxisIndex: 0,
	            smooth:true, 
	            data:[2777104,
	2894332,
	2732781,
	2855457,
	2855457,
	3357131,
	3357131,
	3191973,
	3191973,
	3357131]
	        },
	        {
	            name:'用户数',
	            type:'line',
	            xAxisIndex: 1,
	            yAxisIndex: 1,
	            smooth:true, 
	            data:[493978,
	505228,
	493002,
	500567,
	500567,
	550113,
	550113,
	534560,
	534560,
	145598]
	        }
	    ],
	    color:['#026485','#fff']
	};



        myChart322.setOption(option322);

  


//  ****************************************************	
// 基于准备好的dom，初始化echarts实例
        var myChart323 = echarts.init(document.getElementById('main323'));

        // 指定图表的配置项和数据
       
var option323 =   {
	    title: {
	        text: '平台调用情况',
	        x:'center', 
	        y:'10px',
		    textStyle:{
		        // 文字颜色
		        color:'#fff',
		        // 字体风格,'normal','italic','oblique'
		        fontStyle:'normal',
		        // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
		        fontWeight:'normal',
		        // 字体系列
		        fontFamily:'Microsoft YaHei',
		        // 字体大小
		　　　　 fontSize:27
		    }
	        
	    },
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'cross'
	        }
	    },
	    legend: {
	        data:['调用数','用户数'],
	    	y:'bottom',textStyle: {
                color: '#fff',// 坐标值得具体的颜色

            },
	    },
	    dataZoom: {
	        show: false,
	        start: 0,
	        end: 100
	    },
	    xAxis: [
	        {
	            type: 'category',
	            boundaryGap: true, 
	            data: [
	"08-07",
	"08-08",
	"08-09",
	"08-10",
	"08-11",
	"08-12",
	"08-13",
	"08-14",
	"08-15",
	"08-16"],
    axisLine: {
        lineStyle: {
            type: 'solid',
            color: '#fff',// 左边线的颜色
            width:'0'// 坐标线的宽度
        }
    },
    axisLabel: {
        textStyle: {
            color: '#fff',// 坐标值得具体的颜色

        }
    }
	        },
	        {
	            type: 'category',
	            boundaryGap: true,
	            show : false,
	            data: [
	               	"08-07",
	            	"08-08",
	            	"08-09",
	            	"08-10",
	            	"08-11",
	            	"08-12",
	            	"08-13",
	            	"08-14",
	            	"08-15",
	            	"08-16"],
		            axisLine: {
	                    lineStyle: {
	                        type: 'solid',
	                        color: '#fff',// 左边线的颜色
	                        width:'0'// 坐标线的宽度
	                    }
	                },
	                axisLabel: {
	                    textStyle: {
	                        color: '#fff',// 坐标值得具体的颜色
	 
	                    }
	                }
	        }
	    ],
	    yAxis: [
		        {name:'调用数',
		            type: 'value',
		            scale: true,
		            name: '',
		            max: 4000000,
		            min: 0,
		            boundaryGap: [0.2, 0.2],
		            axisLabel : { 
		            	formatter: function(value) 
		            	{ 
		            	return value/1000000+'M'; 
		            	} 
		            	},
			            axisLine: {
		                    lineStyle: {
		                        type: 'solid',
		                        color: '#fff',// 左边线的颜色
		                        width:'0'// 坐标线的宽度
		                    }
		                },textStyle: {
	                        color: '#fff',// 坐标值得具体的颜色
	               		 
	                    }
		        },
	        {
	            type: 'value',
	            scale: true,
	            name:'用户数',
	            max: 800000,
	            min: 0,
	            boundaryGap: [0.2, 0.2],
	            axisLabel : { 
	            	formatter: function(value) 
	            	{ 
	            	return value/1000+'k'; 
	            	} 
	            	},
		            axisLine: {
	                    lineStyle: {
	                        type: 'solid',
	                        color: '#fff',// 左边线的颜色
	                        width:'0'// 坐标线的宽度
	                    },textStyle: {
	                        color: '#fff',// 坐标值得具体的颜色
	               		 
	                    }
	                }
	        }
	    ],
	    series: [
	        {
	            name:'调用数',
	            type:'bar',
	            xAxisIndex: 0,
	            yAxisIndex: 0,
	            smooth:true, 
	            data:[2777104,
	2894332,
	2732781,
	2855457,
	2855457,
	3357131,
	3357131,
	3191973,
	3191973,
	3357131]
	        },
	        {
	            name:'用户数',
	            type:'line',
	            xAxisIndex: 1,
	            yAxisIndex: 1,
	            smooth:true, 
	            data:[493978,
	505228,
	493002,
	500567,
	500567,
	550113,
	550113,
	534560,
	534560,
	145598]
	        }
	    ],
	    color:['#026485','#fff']
	};



        myChart323.setOption(option323);

    	setInterval(function (){
    	    axisData = "08-17 " + (new Date()).toLocaleTimeString().replace(/^\D*/,'');

    	    var data0 = option323.series[0].data;
    	    var data1 = option323.series[1].data;
    	    //data0.shift();
    	    data0[data0.length-1] = (Math.round(Math.random() * 1000));
    	    //data1.shift();
    	    data1[data1.length-1] = ((Math.random() * 10 + 5).toFixed(1) - 0);

    	    option323.xAxis[0].data[option323.xAxis[0].data.length-1]=axisData;
    	    option323.xAxis[1].data[option323.xAxis[1].data.length-1] = 11;

    	    myChart323.setOption(option323);
    	}, 2100);

//**********************************************

  

function update13(){
	 $.ajax({  
         type: "get",  
         async: true,  
         url: "http://218.85.118.53:8080/qosShow/getReqNums",   
         success: function(data13){ 
             //var data13='{"ifcnt":["400","1500","1300","800","600","1700","1600","1000","500","1800","1700","1250","450","1900","1150","1100","480","1750","1500","1000","380","1750","1400","750","380","1750","900","1400"],"usercnt":[],"date":["0600","1200","1800","0811","0600","1200","1800","0812","0600","1200","1800","0813","0600","1200","1800","0814","0600","1200","1800","0815","0600","1200","1800","0816","0600","1200","1800","0817"]}';
         	data13=eval("(" + data13 + ")");
           option13.xAxis[0].data=data13.ifcnt;
           option13.series[0].data=data13.date;
          myChart13.setOption(option13);
         },  
     }); 
	 

}
//setInterval(update13,2000);
update13();
setInterval(update13,2000);


var demo, options = false;


function change(id,from,to){
	  demo = new CountUp(id, from, to, 0,1, options);
      // you could do demo.start() right here but we are getting actual current star count from github api below
      // since it is an asynchronous call, we fire start() in the success fn of the XMLHttpRequest object
      demo.start();
}

var totalCnt=348365965;
var totalUser=56355688;
function update21(){
	 $.ajax({  
         type: "get",  
         async: true,  
         url: "http://218.85.118.53:8080/qosShow/getCntAll",   
         success: function(data){ 
        	 	data=eval("(" + data + ")");
        	 var newtotalCnt = data.totalIF;
        		var newtotalUser = data.totalUser;
        		change("totalCnt",totalCnt,newtotalCnt);
        		change("totalUser",totalUser,newtotalUser);
         },  
     });  
    /* var data21='{"totalIF":"348365965","totalUser":"56355688"}';
	data21=eval("(" + data21 + ")");
	var newtotalCnt = totalCnt+Math.random()*100;
	var newtotalUser = totalUser+Math.random()*100;
	change("totalCnt",totalCnt,newtotalCnt);
	change("totalUser",totalUser,newtotalUser);*/
  
}
update21();
setInterval(update21,5000);

function update321(){

	 $.ajax({  
        type: "get",  
        async: true,  
        url: "http://218.85.118.53:8080/qosShow/getCntByMonth",   
        success: function(data321){ 
       	 	//data321=eval("(" + data321 + ")");
       	  //var data321='{"ifcnt":["141417","42008579","49798199","29206464","96378938","74372088","59267060"],"usercnt":["98913","6530454","6423860","3388656","14059695","13511434","9937975"],"date":["2月","3月","4月","5月","6月","7月","8月"]}';
      	data321=eval("(" + data321 + ")");
        option321.xAxis[0].data=data321.date.slice(0,data321.date.length-1);
        option321.series[0].data=data321.ifcnt.slice(0,data321.ifcnt.length-1);
        option321.series[1].data=data321.usercnt.slice(0,data321.usercnt.length-1);
        option321.title.text='本月调用' + (data321.ifcnt[data321.ifcnt.length-1]/10000) + '万';
        option321.title.subtext='提速用户' + (data321.usercnt[data321.ifcnt.length-1]/10000) +'万';
       myChart321.setOption(option321);
        },  
    });  
   
}
update321();
setInterval(update321,2000);

function update322(){
	 $.ajax({  
	        type: "get",  
	        async: true,  
	        url: "http://218.85.118.53:8080/qosShow/getCntLastMonth",   
	        success: function(data322){ 
	            //var data322='{"ifcnt":["2617433","2641245","2703805","1883346","1037441","994820","1547431","2194303","2254352","1999205","2320084","2703306","2458807","2405801","2522457"],"usercnt":["461045","474218","568873","405069","332980","322854","349282","390507","400550","367913","413157","443592","425069","415565","459329"],"date":["0818","0817","0816","0815","0814","0813","0812","0811","0810","0809","0808","0807","0806","0805","0804"]}';
	        	data322=eval("(" + data322 + ")");
	          option322.xAxis[0].data=data322.date;
	          option322.series[0].data=data322.ifcnt;
	          option322.series[1].data=data322.usercnt;
	          option323.xAxis[0].data=data322.date;
	          option323.series[0].data=data322.ifcnt;
	          option323.series[1].data=data322.usercnt;
	         myChart322.setOption(option322);
	         myChart323.setOption(option323);	        },  
	    });  

}
update322();
setInterval(update322,2000);
     	